<template>
  <view class="main">
    <button
      class="avatar"
      open-type="chooseAvatar"
      @chooseavatar="onChooseAvatar"
    >
      <image style="height: 100%; width: 100%" :src="avatarUrl"></image>
    </button>
    <form @submit="submit" class="form-container">
      <view class="form-item">
        <view class="form-label"> 昵称: </view>
        <view style="width: 400rpx">
          <u--input
            type="nickname"
            name="nickname"
            v-model="nickname"
            class="username"
            placeholder="请输入昵称"
          />
        </view>
      </view>
      <view class="form-item">
        <view class="form-label"> 手机号: </view>
        <button
          class="getPhone"
          open-type="getPhoneNumber"
          @getphonenumber="getPhoneNumber"
        >
          <view style="width: 400rpx">
            <u--input type="text" v-model="phone" placeholder="请输入手机号" />
          </view>
        </button>
      </view>
      <view class="form-item">
        <view class="form-label"> 区域: </view>
        <uni-data-picker
          style="width: 400rpx"
          placeholder="请选择区域"
          :localdata="regionList"
          v-model="region"
          :map="map"
        >
        </uni-data-picker>
      </view>
      <button class="login-btn" form-type="submit">提交</button>
    </form>
  </view>
</template>

<script>
import {
  getPhonenumber,
  wxRegister,
  getUserMessage,
  queryAllRegion
} from "@/api/feixiang/application.js"
import {
  imageUrl
} from '@/config.js'
export default {
  data() {
    return {
      phone: '',
      role: '',
      avatarUrl: '',
      nickname: '',
      region: '',
      regionList: [],
      map: {
        text: 'regionName',
        value: 'regionName'
      },
      roles: ''
    }
  },
  onShow() {
    this._getUserMessage()
    this.queryAllRegion()
  },
  methods: {
    async _getUserMessage() {
      const res = await getUserMessage()
      console.log(res.data.headimage);
      if (res.data.headimage) {
        this.avatarUrl = res.data.headimage
      } else {
        this.avatarUrl = imageUrl +
          '/profile/avatar/2022/11/19/e7MMHQucVQFg657700a96022645bd964aa0b33d76e23_20221119094612A008.png'
      }
      this.phone = res.data.phone
      this.nickname = res.data.nickName
      this.region = res.data.region
      this.userId = res.data.userId
      this.roles = res.data.roles
      if (this.region) {
        uni.setStorageSync('region', this.region)
        uni.setStorageSync('USER_ID', this.userId)
        uni.setStorageSync('ROLES', this.roles)
      } else {
        uni.setStorageSync('region', '')
        uni.setStorageSync('USER_ID', '')
        uni.setStorageSync('ROLES', '')
      }
    },
    async submit(e) {
      console.log('提交', e);

      const pages = getCurrentPages()
      const prevPage = pages[pages.length - 2]
      //   this.nickname = e.detail.value.nickname
      const res = await wxRegister({
        phone: this.phone,
        nickName: this.nickname,
        headimage: this.avatarUrl,
        region: this.region
      })

      uni.navigateBack(
        {
          delta: 1,
          success: () => {
            prevPage.$vm.refreshUser()
          }
        }
      )
    },
    async getPhoneNumber(e) {
      console.log(e)
      const code = e.detail.code
      const res = await getPhonenumber({
        code,
      })
      this.phone = res.data.phoneNumber
    },
    onChooseAvatar(e) {
      console.log(e.detail);
      this.avatarUrl = e.detail.avatarUrl
      uni.uploadFile({
        url: 'https://applet.youtuyiliao.com/upload/public/uploadImage', //仅为示例，非真实的接口地址
        filePath: this.avatarUrl,
        name: 'file',
        formData: {
          'user': 'test'
        },
        success: (uploadFileRes) => {
          console.log(JSON.parse(uploadFileRes.data).data);
          this.avatarUrl = imageUrl + JSON.parse(uploadFileRes.data).data
        }
      });
    },
    wxGetUserInfo() {

    },
    async queryAllRegion() {
      const res = await queryAllRegion({})
      this.regionList = res.data
    },

  }
}
</script>

<style lang="scss" scoped>
.login-btn {
  position: fixed;
  top: 655rpx;
  left: 50%;
  transform: translateX(-50%);
  width: 300rpx;
  height: 80rpx;
  border-radius: 80rpx;
  background-color: #00bcb2;
  color: #fff;
  font-size: 32rpx;
  line-height: 80rpx;
  text-align: center;
}

.main {
  padding-top: 58rpx;
  margin: 0 auto;
}

.avatar {
  display: block;
  width: 160rpx;
  height: 160rpx;
  margin-left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
  overflow: hidden;
  padding: 0;
}

// ::v-deep.getPhone {
//   /* background-color: transparent;
//   font-size: 28rpx;
//   text-align: left; */
//   padding: 0 !important;
//   padding-left: 0 !important;
// }
::v-deepbutton {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin: 0;
}
.username {
  /* 	width: 100%; */
  text-align: left;
  font-size: 28rpx;
  /* margin-top: 28rpx;
  margin-bottom: 20rpx; */
}

.ipt {
  padding: 0 32rpx;
}

.phone-ipt {
  border-bottom: 2rpx solid #f7f7f7;
  position: relative;
}

.phone-ipt-text {
  position: absolute;
  bottom: 10rpx;
  left: 0;
  font-size: 32rpx;
}

.role-ipt {
  border-bottom: 2rpx solid #f7f7f7;
  position: relative;
}

.role-ipt-text {
  position: absolute;
  bottom: 10rpx;
  left: 0;
  font-size: 32rpx;
}
.form-item {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.form-label {
  width: 100rpx;
  margin: 30rpx 0;
  text-align: right;
  margin-right: 20rpx;
}
.form-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  margin-top: 80rpx;
}
</style>